<%@ page language="java" import="com.siysoft.tc.base.bean.to.User"
	pageEncoding="UTF-8"%>

<!--teacher personal start-->
 <div class="teacher_personal_wrap">
	<div class="onclose" id="closeTeacherDetail">x</div>
	<div class="personal-top">
    	<div class="container" style="overflow:visible">
    		<div class="photo"><c class="teacher_detail_avatar"><img src="<%=request.getContextPath()%>/common/images/photo.png"></c></div>
            <div class="text">
            	<p class="p1"><c class="teacher_detail_name"></c></p>
                <p class="p2">University:<c class="teacher_detail_school"></c> Reward:<c id="teacher_detail_wage">100￡/hour</c></p>
                <p class="p3"><span class="green" id="teacher_detail_level">LV5</span><span>Experience: 9Times</span><span class="green" id="Complain">Complain</span><span class="communicationBtn"><img src="<%=request.getContextPath()%>/common/images/langer.png" width="19" height="19"></span></p>
            </div>
            <div class="apply" id="personal_new"><div class="t" id="newBtn_teacher">New</div><div class="fl"><span>◆</span>Call us :010-000-1203</div></div>
            <div class="personal-rate">
            	<c id="pt_mr">
		            <div class="rate" id="rate1">
		            	<p>PT</p>
		            	<c id="teacher_detail_pt">
		            	<div class="outer"><span class="inner" style="width:65%"></span></div>
		                <div class="rate_num"></div>
		                </c>
		            </div>
		            <div class="rate" id="rate2">
		            	<p>MR</p>
		            	<c id="teacher_detail_mr">
		            	<div class="outer"><span class="inner" style="width:40%"></span></div>
		                <div class="rate_num"></div>
		                </c>
		            </div>
	            </c>
          
			     <div class="rate_data" id="rate_data1">
                	<ul>
                    	<li>
                        	<span class="t">PATIENCE:</span><div class="span_outer"><span class="span_inner" style="width:60%"></span></div><span class="n">60%</span>
                        </li>
                        <li>
                        	<span class="t">PROFESSION:</span><div class="span_outer"><span class="span_inner" style="width:60%"></span></div><span class="n">60%</span>
                        </li>
                        <li>
                        	<span class="t">EXPRESS:</span><div class="span_outer"><span class="span_inner" style="width:60%"></span></div><span class="n">60%</span>
                        </li>
                        <li>
                        	<span class="t">USEFUL:</span><div class="span_outer"><span class="span_inner" style="width:60%"></span></div><span class="n">60%</span>
                        </li>
                        <li>
                        	<span class="t">INTERACTION:</span><div class="span_outer"><span class="span_inner" style="width:60%"></span></div><span class="n">60%</span>
                        </li>
                    </ul>
                </div>	  
                
                
                <div class="rate_data" id="rate_data2">
                	<ul>
                    	<li>
                        	<span class="t">PASS:</span><div class="span_outer"><span class="span_inner" style="width:60%"></span></div><span class="n">60%</span>
                        </li>
                        <li>
                        	<span class="t">EXCELLENT:</span><div class="span_outer"><span class="span_inner" style="width:60%"></span></div><span class="n">60%</span>
                        </li>
                        <li>
                        	<span class="t">OTHER:</span><div class="span_outer"><span class="span_inner" style="width:60%"></span></div><span class="n">60%</span>
                        </li>
                    </ul>
                </div>        
          
        </div>
    </div>	
    </div>
	<div class="personal-cont container" style=" display:block">
    
    	<div class="personal-cont1" >
        	<div class="t">description</div>
            <div class="context" id="teacher_detail_introduction"></div>

        </div>
    
        <div class="personal-cont1" style=" margin-top:15px">
        	<div class="t">HISTORY</div>
            <ul class="ul1" id="reservation_history">
            </ul>
            <div class="more">Show More<span class="glyphicon glyphicon-menu-down"></span></div>
        </div>
        
        <div class="personal-cont1" style=" margin-top:15px">
        	<div class="t">EVALUATION</div>
            <ul class="ul2" id="assessment">
            </ul>
            <div class="more">Show More<span class="glyphicon glyphicon-menu-down"></span></div>
        </div>
        
    </div>
    
 </div>
 
   <!--即时通讯-->   
   <div class="communication">
   		<div class="onclose">x</div>
        <div class="comm_top">
        	<div class="photo"><c class="teacher_detail_avatar"><img src="<%=request.getContextPath()%>/common/images/photo.png"></c></div>
            <div class="text">
            	<p class="p1"><c class="teacher_detail_name">HONG YAN</c></p>
                <p class="p2">SCHOOL:<c class="teacher_detail_school">KINGSTON</c></p>
            </div>
        </div>
        <div class="comm_cont">
        	<ul id="teacher_detail_chat_list">
            </ul>
        </div>
        <div class="send">
        	<input type="text" class="input" id="teacher_detail_chat_content">
            <button class="button" id="teacher_detail_chat_send">SEND</button>

        </div>
   </div> 
  
   <!--投诉单--> 	    
   <div class="complain_cont">
   		<div class="onclose">x</div>
        <div class="cont">
        	<div class="t">Complaint Form</div>
            <div class="green center" style=" font-size:18px">▼</div>	
            <div class="top">
            	<div class="photo"><c class="teacher_detail_avatar"><img src="<%=request.getContextPath()%>/common/images/photo.png"></c></div>
                <div class="text">
            	<p class="p1"><c class="teacher_detail_name">"HONG YAN</c></p>
                <p class="p2">SCHOOL:<c class="teacher_detail_school">KINGSTON</c></p>
            </div>
            </div>
            <form>
            	<ul>
                	<li><span class="dis" style=" position:relative;top:10px">Reservation Code :</span><input type="text" id="complain_reservation_number"></li>
                    <li><span class="dis">Type:</span><input type="text" id="complain_reservation_type"></li>
                    <li><span class="dis">Details:</span><textarea name="" cols="" rows="" class="textarea" id="complain_content"></textarea></li>
                    <li><input type="button" class="button box_shadow" value="Submit" id="complain_button"></li>
                </ul>
                
            </form>
        </div>
   </div> 
 
<script>
function teacher_detail_chat_list(user_id, teacher_id){
	$.ajax({
		type:"get",
		url:"<%=request.getContextPath()%>/app/user/personal_chat_detail.htm",
		data:{
			"user_id1":user_id,
			"user_id2":teacher_id,
			"limit":-1,
			"offset":-1
		},
		async:false,
		success:function(data){
			pc = data.data.personal_chat;
			personal_chat_list_html = "";
			for(var i = 0; i < pc.length; i++){
				personal_chat_list_html = personal_chat_list_html
				+ '<li>'
				+ '<img src="<%=request.getContextPath()%>/'
				+ pc[i].personal_chat_sender_avatar + '" class="photo"> '
				+ pc[i].personal_chat_sender_user_name + ': '
				+ pc[i].personal_chat_content + '</li>';
			}
			$("#teacher_detail_chat_list").html(personal_chat_list_html);
			
		}
	});
} 

function teacher_detail(teacher_id, user_id){
	$(".teacher_personal_wrap .personal-cont").show();
	$.ajax({
		type:"get",
		url:"<%=request.getContextPath()%>/app/teacher/detail.htm",
		data:{
			"id":teacher_id,
			"reservation_limit":-1,
			"reservation_offset":-1,
			"assessment_limit":-1,
			"assessment_offset":-1
		},
		async:false,
		success:function(data){
			var tea = data.data.teacher_detail;
			var teacher_detail_avatar_html = 
			'<img src="<%=request.getContextPath()%>/' + tea.teacher_detail_avatar + '">';
			$(".teacher_detail_avatar").html(teacher_detail_avatar_html);
			$(".teacher_detail_name").html(tea.teacher_detail_name);
			$(".teacher_detail_school").html(tea.teacher_detail_school);
			$("#teacher_detail_wage").html(tea.teacher_detail_wage);
			var level = "LV" + tea.teacher_detail_level;
			$("#teacher_detail_level").html(level);
			$("#teacher_detail_introduction").html(tea.teacher_detail_introduction);
			var tmp_value = tea.teacher_detail_pt-10;
			var pt = '<div class="outer"><span class="inner" style="width:' + tea.teacher_detail_pt + '%"></span></div>'
					+ '<div class="rate_num" style="left:' + tmp_value + '%">' + tea.teacher_detail_pt + '%</div>';
			$("#teacher_detail_pt").html(pt);
			tmp_value = tea.teacher_detail_mr-10;
			var mr = '<div class="outer"><span class="inner" style="width:' + tea.teacher_detail_mr + '%"></span></div>'
					+ '<div class="rate_num" style="left:' + tmp_value + '%">' + tea.teacher_detail_mr + '%</div>';
			$("#teacher_detail_mr").html(mr);
			
			//控制level显示
			if(tea.teacher_level_type == 0){
				$("#teacher_detail_level").html("");
			}
			
			//控制pt、mr显示
			if(tea.teacher_pt_mr_type == 0){
				$("#pt_mr").css('display','none');
			}
			else{
				$("#pt_mr").css('display','block');
			}
			var reservation_history_html = "";
			for(var i = 0; i < tea.teacher_detail_reservation_history.length; i++){
				var re = tea.teacher_detail_reservation_history[i];
				var reservation_time=re.reservation_history_time;
				reservation_time=jsonDateFormat(String(reservation_time));
				reservation_history_html = reservation_history_html
				+ "<li><span>" + re.reservation_history_course
				+ "</span><span>" + reservation_time + "</span><span>TARGET&nbsp"
				+ re.reservation_history_goal
				+ '</span><span>NUMBER&nbsp<em class="green">' + re.reservation_history_number
				+ '</em></span><span>TEACHER&nbsp<em class="green">' + re.reservation_history_teacher_name
				+ "</em></span></li>";
			}
			$("#reservation_history").html(reservation_history_html);
			var assessment_html = "";
			for(var i = 0; i < tea.teacher_detail_assessment.length; i++){
				var ass = tea.teacher_detail_assessment[i];
				assessment_html = assessment_html
			+ '<li><span class="radius"></span> <span class="tea_ev_cont"><span class="blue">'
			+ ass.assessment_user_name + "</span>   :"
			+ ass.assessment_content + '</span>' + '<span class="time">' + jsonDateFormat(String(ass.assessment_time.time)) + '</span>' + '</li>';
			}
			$("#assessment").html(assessment_html);
			

			//new reservation
			$("#newBtn_teacher").on("click",function(){
				var teacher_detail_lecture_html = '<li class="text" title="lecture"><span class="text">Lecturer:'
				+ '<c id="teacher_detail_name">' + tea.teacher_detail_name + '</c></span></li>';
				$(".apply_lecture").html(teacher_detail_lecture_html);
				$(".reservation_window").show();
				$(".reservation_window").css({"z-index" : "190"});
				$(".filterBg").show();
				$(".filterBg").css({"z-index" : "185"});
			})
			

			//complain
			$("#complain_button").on("click", function(){
				$.ajax({
					type:"post",
					url:"<%=request.getContextPath()%>/app/teacher/complain.htm",
					data:{
						"id":user_id,
						"number":$("#complain_reservation_number").val(),
						"type":$("#complain_reservation_type").val(),
						"detail":$("#complain_content").val()
					},
					async:false,
					success:function(data){
						alert(data.data.result);
					}
				});
			});
			
			//teacher_detail_chat_list
			$(".communicationBtn").on("click",function(){
				//var user_id = <%=us.getUser_id() %>;
				teacher_detail_chat_list(user_id, teacher_id);
				
				$("#teacher_detail_chat_send").on("click", function(){
					if($("#teacher_detail_chat_content").val()==""){
						return;
					}
					addPersonalmessageRemind(teacher_id);
					$.ajax({
						type:"post",
						url:"<%=request.getContextPath()%>/app/user/personal_chat_send.htm",
						data:{
							"sender_id":user_id,
							"receiver_id":teacher_id,
							"content":$("#teacher_detail_chat_content").val()
						},
						async:false,
						success:function(data){
							teacher_detail_chat_list(user_id, teacher_id);
							$("#teacher_detail_chat_content").val("");
							var rHeight=$("#teacher_detail_chat_list").height();
							$(".communication .comm_cont").scrollTop(rHeight + 30);
						}
					});
				});
				$(".communication").show();	
				$(".filterBg").show();
				$(".filterBg").css({"z-index" : "190"});
			});
		}
	});
	
	$(".teacher_personal_wrap").show(500);
	$(".filterBg").show();
	$(".filterBg").css({
		"z-index" : "150"
	});
}
</script>